<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户注册表单</title>
		<link rel="stylesheet" href="element-plus/index.css">
		<script src="js/vue.js"></script>
		<script src="element-plus/index.full.js"></script>
	</head>
	<body>
		<div id='app'>
			<el-card style="max-width: 500px;margin: 50px auto;">
				<el-form ref="formRef" label-width='100px' :rules='rules' :model='form'>
					<el-form-item label='用户名' prop='user'>
						<el-input v-model='form.user' placeholder='请输入用户名'></el-input>
					</el-form-item>
					<el-form-item label='密码' prop='psw'>
						<el-input v-model='form.psw' placeholder='请输入密码' type='password'></el-input>
					</el-form-item>
					<el-form-item label='确认密码' prop='repsw'>
						<el-input v-model='form.repsw' placeholder='请确认密码' type='password'></el-input>
					</el-form-item>
					<el-form-item label='邮箱' prop='email'>
						<el-input v-model='form.email' placeholder='请输入邮箱'></el-input>
					</el-form-item>
					<el-form-item label='性别' prop='sex'>
						<el-radio-group v-model='form.sex'>
							<el-radio :label='1'>男</el-radio>
							<el-radio :label='2'>女</el-radio>
						</el-radio-group>
					</el-form-item>

					<el-form-item label='兴趣爱好' prop='hobby'>
						<el-checkbox-group v-model='form.hobby'>
							<el-checkbox label='唱歌'>唱歌</el-checkbox>
							<el-checkbox label='跳舞'>跳舞</el-checkbox>
							<el-checkbox label='运动'>运动</el-checkbox>
							<el-checkbox label='阅读'>阅读</el-checkbox>
						</el-checkbox-group>
					</el-form-item>

					<el-form-item label='出生日期' prop='birth'>
						<el-date-picker 
							v-model='form.birth' 
							type="date" 
							value-format='YYYY/MM/DD' 
							placeholder='选择日期'>
						</el-date-picker>
					</el-form-item>

					<el-form-item label='城市' prop='city'>
						<el-select v-model='form.city' placeholder='选择城市'>
							<el-option label='重庆' value='重庆'></el-option>
							<el-option label='广州' value='广州'></el-option>
							<el-option label='上海' value='上海'></el-option>
						</el-select>
					</el-form-item>

					<el-form-item>
						<el-button type='primary' @click="submitForm">注册</el-button>
						<el-button @click="resetForm">重置</el-button>
					</el-form-item>
				</el-form>
			</el-card>
		</div>
		<script>
			Vue.createApp({
				data() {
					return {
						form: {
							user: '',
							psw: '',
							repsw: '',
							email: '',
							sex: 1, // 默认选中男性
							hobby: [], // 多选框初始为空数组
							birth: '', // 日期选择器初始为空
							city: '重庆' // 默认选中重庆
						},
						rules: {
							user: [
								{required: true, message: '请输入用户名', trigger: 'blur'}
							],
							psw: [
								{required: true, message: '请输入密码', trigger: 'blur'},
								{min: 6, message: '请输入至少6位数密码', trigger: 'blur'}
							],
							repsw: [
								{required: true, message: '请确认密码', trigger: 'blur'},
								{validator: this.confirmPsw, trigger: 'blur'}
							],
							email: [
								{required: true, message: '请输入邮箱', trigger: 'blur'},
								{type: 'email', message: '请输入正确的邮箱格式', trigger: ['blur', 'change']}
							],
							sex: [
								{required: true, message: '请选择性别', trigger: 'change'}
							],
							hobby: [
								{type: 'array', required: true, message: '请至少选择一项兴趣爱好', trigger: 'change'}
							],
							birth: [
								{required: true, message: '请选择出生日期', trigger: 'change'}
							],
							city: [
								{required: true, message: '请选择城市', trigger: 'change'}
							]
						}
					}
				},
				methods: {
					confirmPsw(rule, value, callback) {
						if (value !== this.form.psw) {
							callback(new Error('两次输入的密码不一致'));
						} else {
							callback();
						}
					},
					submitForm() {
						this.$refs.formRef.validate((valid) => {
							if (valid) {
								// 表单验证通过，可以提交数据
								alert('注册成功！\n提交的数据:\n' + JSON.stringify(this.form, null, 2));
								console.log('提交的数据:', this.form);
							} else {
								// 表单验证失败
								console.log('表单验证失败');
								return false;
							}
						});
					},
					resetForm() {
						this.$refs.formRef.resetFields();
						// 重置后重新设置默认值
						this.form.sex = 1;
						this.form.city = '重庆';
					}
				}
			}).use(ElementPlus).mount('#app')
		</script>
	</body>
</html>